import React, { useCallback, useState, useEffect } from 'react';
import { useService } from '@/hooks/async';

import styles from './useService.css';
import { getProductById, IProduct, getSimilarPriceProduct } from '@/services';
/**
 * 演示在变更信息标识后，自动调用服务，并更新绑定的 task state
 */
export default function UseService() {
  const [productId, setProductId] = useState('1');
  const ts = useService([productId], () => [getProductById, { productId }]);
  const price = ts.o ? ts.d.price : undefined;

  // 服务也可以联动，比如调用根据价格查询相似价格的其他产品的服务，有price且price变化调用服务
  const tsList = useService([price], () => [getSimilarPriceProduct, { price }]);

  // 也可以写一个组合服务，集成多个其他服务，然后 useService 调用总服务，不过将只能跟踪整体，而无法跟踪每个服务的状态和过程
  // todo 这里面是一个调用组合服务的语句

  // 传统方式，不通过 task state 方式集成 API 范例
  // 需要自己导入状态，然后更新状态
  // 缺少过程跟踪，任务状态属性，缺少hooks调试支持
  const [product, setProduct] = useState<IProduct>();
  useEffect(() => {
    getProductById(productId).then(setProduct);
  }, [productId]);

  // 用于变更选中的 productId
  const onChangeProduct = useCallback(() => {
    setProductId(v => String(1 + +v));
  }, []);

  return (
    <div className={styles.normal}>
      <h1>Page useService</h1>
      <button onClick={onChangeProduct}>change product</button>
      <ul>
        <li>product info</li>
        <li>{ts.p ? '查找中...' : 'done'}</li>
        <li>productId: {productId}</li>
        <li>型号：{ts.d?.productName}</li>
        <li>价格：{ts.d?.price}</li>
      </ul>
      <pre className={styles.left}>{JSON.stringify(ts, null, 2)}</pre>

      {tsList.o && (
        <ol>
          {tsList.d.map((v: IProduct) => (
            <li>
              {v.productName} {v.price}
            </li>
          ))}
        </ol>
      )}

      <hr />
      <ul>
        <li>product info (old way)</li>
        <li>{product?.productName}</li>
        <li>{product?.price}</li>
      </ul>
    </div>
  );
}
